<template>
    <div class="zw-steps">
        <div class="zw-steps-item" v-for="(item, index) in steps" :key="index">
            <div class="zw-steps-item_block">
                <div :class="['zw-steps-item_num', active >= index ? 'active_num' : '']">
                    <el-icon :size="16" color="#ffffff" v-if="active > index"><Check /></el-icon>
                    <span v-else>{{ index + 1 }}</span>
                </div>
                <span :class="['zw-steps-item_title', active >= index ? 'active_title' : '']">{{ item.title }}</span>
            </div>
            <div
                :class="['zw-steps-item_line', active >= index ? 'active_line' : '']"
                v-if="index + 1 < steps.length"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    steps: {
        type: Array,
        default: () => {
            return [];
        }
    },
    active: {
        type: Number,
        default: 0
    }
});
const steps = computed(() => props.steps);
</script>
<style lang="scss" scoped>
.zw-steps {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    &-item {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        &_block {
            display: flex;
            flex-direction: row;
            align-items: center;

            &:last-child {
                width: max-content;
            }
        }

        &:last-child {
            flex: 0;
        }

        &_num {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #eaeaea;
            text-align: center;
            color: #33302d;
            font-size: 14px;
            font-weight: 400;
            font-family: STHeitiSC-Light, STHeitiSC;
            margin-right: 10px;
        }

        .active_num {
            background-color: #ff6b00;
            color: #ffffff;
        }

        .active_title {
            color: #ff6b00;
        }

        .active_line {
            background-image: linear-gradient(to right, #ff6b00 0%, #ff6b00 50%, transparent 50%);
        }

        &_title {
            color: #33302d;
            font-size: 14px;
            font-weight: 400;
            font-family: STHeitiSC-Light, STHeitiSC;
        }

        &_line {
            height: 1px;
            width: 200px;
            background-image: linear-gradient(to right, #eaeaea 0%, #eaeaea 50%, transparent 50%);
            background-size: 10px 1px;
            background-repeat: repeat-x;
            margin: 0 10px;
            flex-grow: 1;
        }
    }
}
</style>
